<template>
  <div class="student">
    <!--    功能区域-->
    <div style="margin: 10px 20px">
      <el-button type="primary" @click="add">添加</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%; margin-left:50px;" clearable/>
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>

    </div>
    <!--    搜索区域-->
    <!--    <div style="margin: 20px">-->
    <!--      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;"/>-->
    <!--    </div>-->

    <!--    表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="学号" width="120"/>
      <!--      <el-table-column fixed prop="date" label="日期" width="150" sortable/>-->
      <el-table-column label="姓名" width="120">
        <template #default="scope">
          <el-button type="text" style="color: dimgray " @click="handleFile(scope.row.id)">{{
              scope.row.name
            }}
          </el-button>
          <!--          <el-link href="http://localhost:9876/Person" target="_blank">{{ scope.row.name }}</el-link>-->
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="120"/>
      <el-table-column prop="phone" label="电话" width="120"/>
      <el-table-column prop="age" label="年龄" width="120"/>
      <el-table-column prop="parent" label="家长电话" width="120"/>
      <el-table-column prop="classes" label="班级" width="120"/>
      <el-table-column prop="course" label="已报课程" width="120"/>
          <el-table-column prop="residue" label="课程余量" width="120"/>
      <!--    <el-table-column prop="contract" label="合同信息" width="120"/>-->
      <!--    <el-table-column prop="infoRecord" label="交易记录" width="120"/>-->
      <!--    <el-table-column prop="address" label="地址" width="600"/>-->

      <!--      <el-table-column prop="zip" label="Zip" width="120" />-->
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <!--        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>-->
          <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text" size="large">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <!--    弹出框-->
    <el-dialog v-model="dialogVisible" title="" width="30%">
      <!--      <span>This is a message</span>-->
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="电话">
          <el-input v-model="form.phone" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="年龄">
          <el-input v-model="form.age" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="家长">
          <el-input v-model="form.parent" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="班级">
          <el-input v-model="form.classes" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
          <el-form :model="form" label-width="120px">
            <el-form-item label="已报课程">
              <el-select v-model="form.course" placeholder="请选择">
                <el-option v-for="item in options" :key="item.courseName" :label="item.courseName" :value="item.courseName">
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="课程余量">
          <el-select v-model="form.residue" placeholder="请选择">
            <el-option v-for="item in options" :key="item.weekTimes" :label="item.weekTimes" :value="item.weekTimes">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <!--    <el-form :model="form" label-width="120px">-->
      <!--      <el-form-item label="课程余量">-->
      <!--        <el-input v-model="form.residue" style="width: 80%"></el-input>-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->
      <!--    <el-form :model="form" label-width="120px">-->
      <!--      <el-form-item label="合同信息">-->
      <!--        <el-input v-model="form.contract" style="width: 80%"></el-input>-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->
      <!--    <el-form :model="form" label-width="120px">-->
      <!--      <el-form-item label="交易记录">-->
      <!--        <el-input v-model="form.infoRecord" style="width: 80%"></el-input>-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->
      <!--    <el-form :model="form" label-width="600px">-->
      <!--      <el-form-item label="地址">-->
      <!--        <el-input v-model="form.address" style="width: 80%"></el-input>-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->


      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <div class="demo-pagination-block">
      <!--      <span class="demonstration">All combined</span>-->
      <el-pagination
          v-model:currentPage="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>


<script>
import request from "@/utils/request";

export default {
  name: 'Student',
  components: {},


  data() {
    return {
      search: '',
      form: {},
      dialogVisible: false,
      tableData: [],
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      options:[],
    }
  },

  created() {
    this.load()
  },

  methods: {
    load() {
      request.get("/student/Query", {
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
      request.get("/course/wx").then(res => {
        console.log(res)
        this.options = res.data

      })
    },
    handleFile(id) {
      sessionStorage.setItem("id", id)//缓存id
      this.$router.push("/stuFile")
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    add() {
      this.dialogVisible = true
      this.form = {}
    },
    save() {
      if (this.form.id) {
        request.put("/student", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible = false
        })
      } else {
        request.post("/student", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible = false
        })
      }
    },
    handleDelete(id) {
      console.log(id)
      request.delete("/student/" + id).then(res => {
        if (res.code === '0') {
          this.$messageBox({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$messageBox({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    handleSizeChange(pageSize) {     //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  //改变当前页码触发
      this.currentPage4 = pageNum
      this.load()
    },
    // currentPage4() {
    // },
  },
}


</script>

<style scoped>

</style>